<template>
    <div>
        <center><h1>Vue组件之间的通讯</h1></center>
        <!-- 属性：设置属性、传递属性、接收属性、使用属性 -->
        <PropsChild title="标题" :age="88" :callback="propsCallback" />
        <EmitChild @emitDataToParent="emitDataToParent" />
        <BusChildLevel1 />
        <BusChildBrotherLevel1 />
        <RefChild ref="refChild" />
        <center>
            <button @click="changeRefChildTitle">修改Ref子组件的标题</button>
            <button @click="getChildren">找到所有子组件</button>
            {{ age }}
        </center>
        <VModel></VModel>
        <center>
            <h1>.Sync修饰符父组件部分内容：</h1>
            <p>父组件拥有{{ total }}元</p>
        </center>
        <!-- <SyncChild :money="total" @money="total = $event"></SyncChild> -->
        <!-- <SyncChild :money="total" @money="function(money){ total = money}"></SyncChild> -->
        <!-- <SyncChild :money="total" @money="money=> total = money"></SyncChild> -->
        <!-- <SyncChild :money="total" @update:money="total = $event"></SyncChild> -->
        <!-- <SyncChild :money.sync="total"></SyncChild> -->

        <!-- <SyncChild
            :money="total"
            @update:money="total = $event"
            :title="doc.title"
            @update:title="doc.title = $event"
            :content="doc.content"
            @update:content="doc.content = $event"
        ></SyncChild> -->

        <!-- 上面代码的语法糖 -->
        <SyncChild :money.sync="total" v-bind.sync="doc"></SyncChild>
        <HintButton
            type="primary"
            icon="el-icon-edit"
            size="mini"
            title="提示信息"
            @click="alert('HintButtonClick')"
        ></HintButton>
        <HintButton
            type="primary"
            icon="el-icon-edit"
            size="mini"
            title="提示信息"
            @dblclick="dblclick"
        ></HintButton>

        <ProvideChild />
        <p>{{ content1 }} {{ content2.name }}</p>

        <SlotChild>
            <h2 slot="title">{{ title }}</h2>
            <p slot="content">{{ content }}</p>
            <div>
                <p>其它的slot内容</p>
            </div>
            <div slot="subTitle"><h3>slot副标题</h3></div>
        </SlotChild>

        <!-- 作用域插槽主要解决的是子与父之间的通讯，其实它也有父与子的通讯
        1.父组件想要控制界面的样式
        2.父组件需要传递数组到子组件中
        3.父组件不进行遍历，而是由子组件对数组进行遍历
        4.子组件通过slot将遍历的对象再次传递给父组件
        5.父组件接收到子组件传递过来的对象，那么就可以利用对象进行自定义界面的布局操作
         -->
        <SlotScopeChild :todos="todos">
            <template v-slot="{ item, index }">
                <el-tag>{{ item.text }}</el-tag>
            </template>
        </SlotScopeChild>
    </div>
</template>

<script>
import PropsChild from '@/components/PropsChild';
import EmitChild from '@/components/EmitChild';
import BusChildLevel1 from '@/components/BusChildLevel1';
import BusChildBrotherLevel1 from '@/components/BusChildBrotherLevel1';
import RefChild from '@/components/RefChild';
import VModel from '@/components/VModel';
import SyncChild from '@/components/SyncChild';
import HintButton from '@/components/HintButton';
import ProvideChild from '@/components/ProvideChild';
import SlotChild from '@/components/SlotChild';
import SlotScopeChild from '@/components/SlotScopeChild';

export default {
    name: 'App',
    components: {
        PropsChild,
        EmitChild,
        BusChildLevel1,
        BusChildBrotherLevel1,
        RefChild,
        VModel,
        SyncChild,
        HintButton,
        ProvideChild,
        SlotChild,
        SlotScopeChild,
    },
    data() {
        return {
            age: 18,
            total: 1000,
            doc: {
                title: '标题',
                content: '内容',
            },
            content1: 'content1',
            content2: {
                name: 'Vane',
            },
            title: 'Slot Title',
            content: 'Slot Content',
            todos: [
                { id: 1, text: 'AAA', isComplete: false },
                { id: 2, text: 'BBB', isComplete: false },
                { id: 3, text: 'CCC', isComplete: true },
                { id: 4, text: 'DDD', isComplete: false },
                { id: 5, text: 'EEE', isComplete: true },
                { id: 6, text: 'FFF', isComplete: false },
            ],
        };
    },
    provide() {
        return {
            content1: this.content1,
            content2: this.content2,
            updateContent1: this.updateContent1,
        };
    },
    methods: {
        updateContent1() {
            this.content1 = 'content1的新内容';
        },
        dblclick(e) {
            console.log(e);
        },
        alert() {
            alert('HintButtonClick');
        },
        propsCallback() {
            console.log('propsCallback');
        },
        emitDataToParent(data, data2) {
            console.log('子与父进行emit事件发射，但不传递参数', data, data2);
        },
        changeRefChildTitle() {
            // this.$refs.refChild.title = '通过Ref找到子组件并修改它的标题';
            this.$refs.refChild.updateTitle();
        },
        getChildren() {
            this.$children.map((item) => {
                if (item.updateTitle) {
                    item.updateTitle();
                }
            });
        },
    },
};
</script>
